<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Notify 通知提示"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="不同类型">
      <hips-button
        type="primary"
        block
        @click.native="openNotifyWithIcon"
      >
        点击弹出不同类型的 Notify
      </hips-button>
    </demo-block>
    <demo-block title="自定义icon">
      <hips-button
        type="primary"
        block
        @click.native="openIconNotify"
      >
        自定义 icon 的 Notify
      </hips-button>
    </demo-block>
    <demo-block title="关闭notify">
      <hips-button
        style="margin-bottom: 20px"
        type="warning"
        block
        @click.native="openHideNotifyManu"
      >
        手动点击关闭 Notify
      </hips-button>
      <hips-button
        type="warning"
        block
        @click.native="openHideNotify"
      >
        方法关闭 Notify
      </hips-button>
    </demo-block>
    <demo-block title="使用html">
      <hips-button
        type="warning"
        block
        @click.native="openHtmlNotify"
      >
        使用Html片段
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button} from '@hips/vue-ui';
export default {
  components: {    
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      show: false,
    };
  },

  methods: {
    basicShow() {
      this.show = true;
    },
    getClose() {
      this.$hips.toast('关闭了 Notify');
    },
    openNotify() {
      this.$hips.notify({
        message: 'Successful operation',
        duration: 0,
      });
    },
    openNotifyWithIcon() {
      console.log('openNotifyWithIcon');
      this.$hips.notify({
        message: 'Successful operation',
        type: 'success',
        safeArea: false,
      });
    },
    openIconNotify() {
      this.$hips.notify({
        message: 'error operation',
        type: 'error',
        icon: 'el-icon-star-off',
      });
    },
    openHideNotifyManu() {
      this.$hips.notify({
        message: 'error operation',
        type: 'error',
        duration: 0,
        showClose: true,
      });
    },
    openHideNotify() {
      let notify = this.$hips.notify({
        message: 'warning operation',
        type: 'warning',
        duration: 9000,
      });
      setTimeout(() => {
        notify.close();
      }, 2000);
    },
    openHtmlNotify() {
      this.$hips.notify({
        dangerouslyMessage: true,
        message: '<strong>This is <i>HTML</i> fragment</strong>',
        type: 'warning',
        mask: true,
        center: true,
      });
    },
  },
};
</script>
